<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>

    </p>
    <script>
        var para = document.querySelector('p')
        var cats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
        var info = 'My cats are called ';
        for (let i = 0 ; i < cats.length ; i++) {
            if (i === cats.length -1) {
                info += 'and ' + cats[i] + '.';
            }
            else {
                info += cats[i] + ',';
            }
        }

        para.textContent = info
    </script>
</body>
</html>